

// 按钮类型

// 主按钮 el-button--primary
// 二级按钮 el-button--default
// 危险按钮 el-button--danger
// 操作 el-button--text

// 按钮尺寸

// 标准 el-button--medium
// 中型 el-button--small
// 小型 el-button--mini

// 按钮字体
.el-button--primary,.el-button--default,.el-button--danger,.el-button--text {
  font-size: $--text-font-size;
  line-height: $--text-font-lineheight;
  border-radius: 2px;
}

// 按钮尺寸
.el-button--medium {
  padding: 7px 15px;
}

.el-button--small {
  padding: 5px 15px;
}

.el-button--mini {
  padding: 3px 10px;
}

// 操作按钮去掉外边距
.el-button--text {
  padding: 0px;
  border: unset;
}

// 主按钮样式
.el-button--primary {
  background-color: $--color-primary;
}

// 主按钮悬停样式
.el-button--primary:hover {
  background-color: $--color-primary-hover;
}

// 主按钮点击样式
.el-button--primary:active,.el-button--primary:focus {
  background-color: $--color-primary-pressed;
}

// 二级按钮样式
.el-button--default {
  color: $--color-assist-second-text;
  border-color: $--color-assist-border;
  background-color: unset;
}

// 二级按钮悬停样式
.el-button--default:hover {
  color: $--color-primary;
  border-color: $--color-primary;
  background-color: unset;
}

// 二级按钮点击按钮
.el-button--default:active,.el-button--default:focus {
  color: $--color-primary;
  border-color: $--color-primary;
  background-color: $--color-alert-spare4;
}

// 危险按钮样式
.el-button--danger {
  color: $--color-assist-error;
  border-color: $--color-assist-error;
  background-color: unset;
}

// 危险按钮 悬停 点击 样式
.el-button--danger:hover,.el-button--danger:active,.el-button--danger:focus {
  color: $--color-alert-spare5;
  border-color: $--color-assist-error;
  background-color: $--color-assist-error;
}

// 操作按钮样式
.el-button--text {
  color: $--color-primary;
}

// 操作按钮样式 悬停 点击 样式
.el-button--text:hover,.el-button--text:active,.el-button--text:focus {
  color: $--color-primary-pressed;
}

// 设置 主按钮 二级按钮 危险按钮 不可用的样式以及悬停样式
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--default.is-disabled,
.el-button--default.is-disabled:hover,
.el-button--danger.is-disabled,
.el-button--danger.is-disabled:hover {
  color: $--color-assist-placehold;
  background-color: $--color-assist-disabled-inputable;
  border-color: $--color-assist-border;
}

// 操作按钮 不可用的样式
.el-button--text.is-disabled {
  color: $--color-assist-placehold;
}

// 图标按钮样式
.icon-button {
  height: 32px;
  font-size: 14px;
  padding: 0px 10px;
  line-height: 14px;
  display: flex;
  align-items: center;

  &>span {
    display: flex;
    align-items: center;
  }

  .iconfont {
    display: flex;
    align-items: center;
  }

  .iconfont,.iconfont::before {
    font-size: 14px;
  }
}